<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>

    <!-- 字体图标样式表 -->
	<link href="fonts/iconfont.min.css" rel="stylesheet"/>
	<!-- 清除标签原始样式 -->
    <link href="css/normal.min.css" rel="stylesheet"/>
	<!-- 公共样式表 -->
	<link href="css/common.min.css" rel="stylesheet"/>
	<!-- 自定义样式表 -->
	<link href="css/local.min.css" rel="stylesheet"/>
	
	<!-- flex-自适应插件 -->	 
	<script type="text/javascript" src="lib/flexible.min.js" ></script>
	<!-- jquery-Dom操作插件 -->
	<script type="text/javascript" src="lib/jquery-2.1.0.min.js" ></script>
	<!-- vue-组件化插件 -->
	<script type="text/javascript" src="lib/vue.min.js"></script>
	<!-- hammer-移动端手势实践插件 -->
    <script type="text/javascript" src="lib/hammer.min.js" ></script>
    <!-- vue-touch-vue自定义指令插件 -->
    <script type="text/javascript" src="lib/vue-touch.min.js" ></script>
   
</head>
<body>
	<div class="body">
		<section class="music-page">
			<!-- 页眉 --> 
			<header class="">
				<h1 class="">本地歌曲</h1>
				<v-touch id="m-search" v-on:tap="searchEvent" class="icon iconfont icon-scan"></v-touch>
			</header>
			<!-- End页眉 -->
			
			<!-- 内容  -->
			<div class="content" v-bind:class="{'padding-bottom':music.currentList.length > 0}">
				<div class="loading border-bottom">
					<p>正在扫描...</p>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="music-category">
					<ul>
						<li class="select"><v-touch v-on:tap="showMusicList(0)" class="v-touch">歌曲</v-touch></li>
						<li><v-touch v-on:tap="showArtistList(1)" class="v-touch">歌手</v-touch></li>
						<li><v-touch v-on:tap="showAlbumList(2)" class="v-touch">专辑</v-touch></li>
						<li><v-touch v-on:tap="showFloderList(3)" class="v-touch">文件夹</v-touch></li>
					</ul>
				</div>
				<div class="container">
					<!-- 单曲列表 -->
					<ul id="single-music-list"  class="m-ul">
						<li class="m-li border-bottom" v-on:touchstart="animationOnTap(index)" v-on:touchend="endAnimation(index)" v-for="(item, index) in music.localList">
							<v-touch class="m-li-info" v-on:tap="onSelect(index)">
								<!-- <img v-bind:src="item.img" /> -->
								<span>
									<span class="m-title">{{item.name}}</span>
									<span class="m-artist">{{item.artist}}</span>
								</span>
							</v-touch>
							<div class="m-li-basic" v-on:touchstart="popMenu(index)" v-on:touchend="endPop"><i class="icon iconfont icon-other-list"></i></div>
						</li>
					</ul>
					<!-- End单曲列表 -->
					
					<!-- 歌手列表 -->
					<ul id="artist-music-list"  class="m-ul">
						<li class="m-li border-bottom" v-on:touchstart="animationOnTap(index)" v-on:touchend="endAnimation(index)" v-for="(item, index) in music.artistList">
							<v-touch class="m-li-info" v-on:tap="onSelectArtist(index)">
								<img src="img/artist.png" />
								<span>
									<span class="m-title">{{item[0].artist}}</span>
									<span class="m-artist">{{item.length}}首</span>
								</span>
							</v-touch>
							<!-- <div class="m-li-basic" v-on:touchstart="popMenu(index)" v-on:touchend="endPop"><i class="icon iconfont icon-other-list"></i></div> -->
						</li>
					</ul>
					<!-- End歌手列表 -->

					<!-- 专辑列表 -->
					<ul id="album-music-list"  class="m-ul">
						<li class="m-li border-bottom" v-on:touchstart="animationOnTap(index)" v-on:touchend="endAnimation(index)" v-for="(item, index) in music.albumList">
							<v-touch class="m-li-info" v-on:tap="onSelectAlbum(index)">
								<img src="img/album.png" />
								<span>
									<span class="m-title">{{item[0].album}}</span>
									<span class="m-artist">{{item.length}}首</span>
								</span>
							</v-touch>
							<!-- <div class="m-li-basic" v-on:touchstart="popMenu(index)" v-on:touchend="endPop"><i class="icon iconfont icon-other-list"></i></div> -->
						</li>
					</ul>
					<!-- End专辑列表 -->
					
					<!-- 文件夹列表 -->
					<ul id="floder-music-list"  class="m-ul">
						<li class="m-li border-bottom" v-on:touchstart="animationOnTap(index)" v-on:touchend="endAnimation(index)" v-for="(item, index) in music.floderList">
							<v-touch class="m-li-info" v-on:tap="onSelectFolder(index)">
								<img src="img/floder.png" />
								<span>
									<span class="m-title">{{item[0].path.substring(0, item[0].path.lastIndexOf('/'))}}</span>
									<span class="m-artist">{{item.length}}首</span>
								</span>
							</v-touch>
							<!-- <div class="m-li-basic" v-on:touchstart="popMenu(index)" v-on:touchend="endPop"><i class="icon iconfont icon-other-list"></i></div> -->
						</li>
					</ul>
					<!-- End文件夹列表 -->
					
					<div class="data-loading">
						<div class="cube1"></div>
						<div class="cube2"></div>
					</div>
				</div>
			</div>
			<!-- End内容  -->
			
			<!-- 页脚 -->
			<footer v-show="music.currentList.length > 0">
				<div class="music-info">
					<v-touch class="v-touch" v-on:tap="tap">
						<img id="playing-image" v-bind:src="music.mImage" alt="专辑封面">
						<span class="music-title">
							<span v-show="!show.minName" class="playing-song-title playing-song-title-style">{{music.mName}}</span>
							<marquee v-show="show.minName" class="playing-song-title-style">{{music.mName}}</marquee>
							<span v-show="!show.minArtist" class="playing-song-author playing-song-author-style">{{music.mArtist}}</span>
							<marquee v-show="show.minArtist" class="playing-song-author-style">{{music.mArtist}}</marquee>
						</span>
					</v-touch>
				</div>
				<div class="btn-ctl"><v-touch id="ms-list" v-on:tap="playList" class="v-touch icon iconfont icon-music-list"></v-touch></div>
				<div class="btn-ctl"><v-touch id="ms-play" v-on:tap="playEvent" class="ms-play v-touch icon iconfont icon-play-outline"></v-touch></div>
				<div class="btn-ctl"><v-touch id="ms-next" v-on:tap="nextMusic" class="v-touch icon iconfont icon-skip-next"></v-touch></div>
		    </footer>
			<!-- End页脚 -->
		</section>
		
		<section class="play-page bg-color">
			<!-- 页眉 --> 
			<header class="play-title">
				<v-touch class="v-touch icon iconfont icon-back" v-on:tap="tap"></v-touch>
				<div class="play-info">
					<h1 v-show="!show.playName" class="play-name play-name-sytle">{{music.mName}}</h1>
					<marquee v-show="show.playName" class="play-name-style">{{music.mName}}</marquee>
					<h2 v-show="!show.playArtist" class="play-artist play-artist-sytle">{{music.mArtist}}</h2>
					<marquee v-show="show.playArtist" class="play-artist-sytle">{{music.mArtist}}</marquee>
				</div>
			</header>
			<!-- End页眉 -->
			
			<!-- 内容  -->
			<div class="container">
				<!-- 播放封面 -->	 
				<v-touch class="ms-cover-box" v-on:tap="tap">
					<div class="ms-cover playing-animation">
						<img v-bind:src="music.mImage">
					</div>
				</v-touch>
				<!-- End播放封面 -->
				
				<!-- 歌词 -->
				<v-touch class="ms-lyric" v-on:tap="tap">
					<div class="ms-audio-volume">
						<span class="icon iconfont icon-volume-up"></span>
						<div class="progress">
							<div class="now-progress"></div>
							<div v-on:touchstart="start" v-on:touchmove="move" v-on:touchend="end" class="progress-dot"></div>
						</div>
					</div>
					<section class="lyric-container">
						<div class="lyric-wrap">
							<p v-for="(item, index) in music.lyricArr" v-bind:data-option="item.time">{{item.text}}</p>
						</div>
					</section>
				</v-touch>
				<!-- End歌词 -->
			</div>
			<!-- End内容  -->
			
			<!-- 播放进度 -->
			<div class="ms-audio-time">
				<span class="now-time">00:00</span>
				<div class="progress">
					<div class="now-progress"></div>
					<div v-on:touchstart="start" v-on:touchmove="move" v-on:touchend="end" class="progress-dot"></div>
				</div>
				<span class="duration">00:00</span>
			</div>
			<!-- End播放进度 -->
		
			<!-- 页脚 -->
			<footer>
				<v-touch id="ms-pattern" v-on:tap="playPattern" class="v-touch icon iconfont icon-repeat"></v-touch>
				<v-touch id="ms-previous" v-on:tap="prePlay" class="v-touch icon iconfont icon-music-previous"></v-touch>
				<v-touch id="ms-play" v-on:tap="playEvent" class="ms-play v-touch icon iconfont icon-play-outline"></v-touch>
				<v-touch id="ms-next" v-on:tap="nextPlay" class="v-touch icon iconfont icon-music-next"></v-touch>
				<v-touch id="ms-list" v-on:tap="musicList" class="v-touch icon iconfont icon-music-list"></v-touch>
		    </footer>
		<!-- End页脚 -->
		</section>
	</div>
	<!-- 遮罩层 -->
	<v-touch class="mask" v-on:tap="maskEvent"></v-touch>
	<!-- End 遮罩层 -->
	
	<!-- 弹出菜单 -->
	<div class="fn-pop-menu">
		<ul>
			<li class="menu-title">歌曲：<span>{{name}}</span></li>
			<li>
				<v-touch v-on:tap="showMusicInfo" class="v-touch">
					<i class="icon iconfont icon-music-library2"></i>
					<span class="border-bottom">查看歌曲信息</span>
				</v-touch>
			</li>
			<li>
				<v-touch v-on:tap="deleteTap" class="v-touch">
					<i class="icon iconfont icon-delete"></i>
					<span class="border-bottom">删除</span>
				</v-touch>
			</li>
		</ul>
	</div>
	<!-- End弹出菜单 -->

	<!-- 删除确定弹出框 -->
	<div class="del-menu">
		<div class="del-box">
			<p>确定将所选音乐从本地列表中移除吗？</p>
			<v-touch class="v-touch" v-on:tap="checkDel"><span class="check-box"></span>同时删除本地文件</v-touch>
			<div class="btn-box">
				<v-touch class="cancel-btn" v-on:tap="cancel">取消</v-touch>
				<v-touch class="del-btn" v-on:tap="delEvent">删除</v-touch>
			</div>
		</div>
	</div>
	
	<!-- 歌曲信息弹出框 -->
	<div class="pop-music-info">
		<table>
			<caption>歌曲信息</caption>
			<tbody>
				<tr>
					<td class="width-100">
						<span class="title">歌名</span>
						<span class="info">{{info.name}}</span>
					</td>
				</tr>
				<tr>
					<td class="width-100">
						<span class="title">歌手</span>
						<span class="info">{{info.artist}}</span>
					</td>
				</tr>
				<tr>
					<td class="width-100">
						<span class="title">专辑</span>
						<span class="info">{{info.album}}</span>
					</td>
				</tr>
				<tr>
					<td class="width-50">
						<span class="title">采样率</span>
						<span class="info">{{info.frequency}}KHz</span>
					</td>
					<td class="width-50">
						<span class="title">比特率</span>
						<span class="info">{{info.bitrate}}Kbps</span>
					</td>
				</tr>
				<tr>
					<td class="width-50">
						<span class="title">文件大小</span>
						<span class="info">{{info.size}}MB</span>
					</td>
					<td class="width-50">
						<span class="title">时长</span>
						<span class="info">{{duration}}</span>
					<td>
				</tr>
				<tr>
					<td class="width-100">
						<span class="title">文件路径</span>
						<span class="info">{{info.path}}</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- End歌曲信息弹出框 -->

	<!-- 收藏弹出菜单 -->
	<div class="like-pop-menu"></div>
	<!-- End收藏弹出菜单 -->
	
	<!-- 播放列表 -->
	<div class="music-play-list">
		<div class="menu-title border-bottom">
			<span>播放列表({{music.currentList.length}})</span>
			<v-touch class="v-touch" v-on:tap="clearAll">清空</v-touch>
		</div>
		<ul>
			<li class="border-bottom" v-for="(item, index) in music.currentList">
				<v-touch v-on:tap="onSelect(index)" class="v-touch">
					<i></i><span class="title">{{item.name}} - <span>{{item.artist}}</span></span>
				</v-touch>
				<v-touch v-on:tap="removeItem(index)" class="icon iconfont icon-delete">
				</v-touch>
			</li>
		</ul>
	</div>
	<!-- End播放列表 -->
	

	<!-- Music类 -->
   	<script type="text/javascript" src="js/music.min.js"></script>
   	<!-- Util类 -->
   	<script type="text/javascript" src="js/Util.min.js"></script>
   	<!--mqrquee类 -->
   	<script type="text/javascript" src="js/mqrquee.min.js"></script>
   	<!-- UIFrame类 -->
	<script type="text/javascript" src="js/UIFrame.min.js" ></script>
	<!-- vue组件 -->
   	<script type="text/javascript" src="js/component.min.js" ></script>
   	
</body>
</html>